<template>
  <div id="content">
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite logo" />
    </a>
    <a href="https://vuejs.org/" target="_blank">
      <img src="../../../assets/vue.svg" class="logo vue" alt="Vue logo" />
    </a>
  </div>
  <div v-html="pastedContent" />
  <el-button @click="copyText">复制</el-button>
  <el-button @click="pasteText">粘贴</el-button>
</template>

<script setup lang="ts">
import { ref } from "vue";
import clipboard from "@/utils/clipboard";

const pastedContent = ref<string>("");
const copyText = () => {
  const content = document.getElementById("content");
  clipboard(content?.innerHTML);
};

const pasteText = async () => {
  if (!("clipboard" in navigator)) {
    console.error("当前浏览器不支持直接读取剪贴板操作，请升级浏览器。");
    return;
  }

  try {
    const clipboardContent = await navigator.clipboard.readText();
    pastedContent.value += clipboardContent;
  } catch (error) {
    console.error("读取剪贴板内容失败:", error);
  }
};
</script>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}

.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
</style>
